<template>
  <div class="container my-info">
    <!-- <van-nav-bar
      title="我的信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <div class="input-group">
      <van-cell-group>
        <van-field
          v-model="phone"
          label="手机号"
          placeholder="请输入手机号"
        />
      </van-cell-group>
      <!-- <van-cell-group>
        <van-field
          v-model="carNo"
          label="车牌号"
          placeholder="请输入车牌号"
        />
      </van-cell-group> -->
      <van-cell-group>
        <van-field
          v-model="birthday"
          label="出生日期"
          @click="selectBirthday"
          readonly
          placeholder="请选择出生日期"
        />
      </van-cell-group>
    </div>
    <div class="my-info-btn-row">
        <van-button type="danger" class="save-btn" @click="updateUserInfo">{{btntext}}</van-button>
    </div>
    <van-popup v-model="isShowSelectTime" label="出生日期" position="bottom" :overlay="true">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @cancel="isShowSelectTime = false"
        @confirm="isShowSelectTime = false"
        @change="birthdayChange"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>

<script>
//import { msToDate } from '@/until/until';
export default {
  name: 'myInfo',
  data() {
    return {
      currentDate: new Date(2000,1,1),
      minDate: new Date(1900,1,1),
      maxDate: new Date(),
      isShowSelectTime:false,
      birthday:'',
      phone:'',
      carNo:'',
      userId:'',
      flag:true,
      btntext:'保存'
    };
  },
  mounted() {
    // this.getUserInfo();
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.birthday = (userInfo.Birthday).substring(0,10);
    this.phone = userInfo.Phone;
    this.carNo = userInfo.CarNumber;
    this.userId = userInfo.Id;
    if(this.phone == ''){
      this.flag = false;
      this.btntext = '绑定'
    }
  },
  methods: {
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`;
      } else if (type === 'month') {
        return `${value}月`
      }
      return value;
    },
    selectBirthday(){
      if(!this.birthday){
        this.isShowSelectTime = true;
      }
    },
    birthdayChange(e){
      let endTimeArr = e.getValues();
      this.birthday = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    getUserInfo(){
      this.$api.mine.getUserInfo({        
          Id: this.userId      
      }).then(res=> {
        localStorage.setItem("userInfo", JSON.stringify(res.Data));
      })    
    },
    updateUserInfo(){
      if(this.phone == ''){
        this.$toast('请输入手机号')
        return false;
      }else{
        let myreg=/1\d{10}/;
          if (!myreg.test(this.phone)) {  
              this.$toast('请输入有效的手机号');
              return false;
          }
      }
      if(this.birthday == ''){
        this.$toast('请选择出生日期')
        return false;
      }
      let params = {
        Id:this.userId,
        Phone:this.phone,
        CarNumber:this.carNo,
        Birthday:this.birthday
      }
      this.$api.mine.updateUserInfo(params).then(res=> {
        if(res.IsSuccess){
          if(this.flag){
            this.$toast.success('修改成功');
            setTimeout(()=>{
              this.$router.go(-1);
            },1500)
          }else{
            this.$dialog.alert({
              title: '提示',
              message: '绑定成功，初始密码为:000000'
            }).then(() => {
              // on close
            });
          }
        }
        this.getUserInfo();
      })    
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.my-info {
  .input-group {
    margin-top: .266667rem;
  }
  .select-time{
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .my-info-btn-row {
    margin-top: 1.066667rem;
    text-align: center;

    .save-btn {
      width: 90%;
    }
  }
}
</style>